<template>
	<!-- 新增还车 -->
	<div id="addReturn">
		<div class="nomal_form_main">
		<el-form
			:model="form"
			:rules="rules"
			ref="form"
			label-width="100px"
			class="demo-ruleForm"
		>
			<div class="top_cell main_cell dis_f_sarwc" style="position: relative;">
				<el-form-item label="发车门店" prop="shopId">
					<div class="fwb" style="position: absolute;left: -1.6rem;color: #F56C6C;">*</div>
					<el-select v-model="form.shopId" placeholder="请选择发车门店">
						<el-option
							v-for="item in shopList"
							:key="item.id"
							:label="item.shopName"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="车辆" style="position: relative;">
					<div class="fwb" style="position: absolute;left: -1rem;color: #F56C6C;">*</div>
					<el-select
						v-model="a.carNumber == null ? '' : a.carNumber + '=>' + a.brand"
						filterable
						placeholder="请选择车辆"
						@change="selectCar"
						ref="agentSelect"
						@hook:mounted="cancalReadOnly"
						@visible-change="cancalReadOnly">
						<el-option
							v-for="item in carList"
							:key="item.id"
							:label="item.carNumber + '=>' + item.brand"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</div>

			<!-- h1 还车信息 -->
			<div class="main_cell dis_f_sarwc">
				<div class="wa cell_label col_1 fwb" style="padding: 0 .4rem;"> 还车信息 </div>
				<el-form-item label="还车时间" prop="endTime">
					<el-date-picker clearable
						v-model="form.endTime"
						type="datetime"
						default-time="9:00:00"
						format="yyyy-MM-dd HH:mm"
						value-format="yyyy-MM-dd HH:mm"
						placeholder="选择还车时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="是否有违章" prop="isBreak">
					<el-radio-group v-model="form.isBreak">
						<el-radio
							v-for="dict in dict.type.is_break"
							:key="dict.value"
							:label="dict.value"
						>{{ dict.label }}
						</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="违章照片" prop="startGaugeImg"  v-if="form.isBreak == '1'">
					<image-upload v-model="form.startGaugeImg" :is-show-tip="false" />
				</el-form-item>
				<el-form-item label="违章描述" prop="breakDescription"v-if="form.isBreak == '1'">
					<el-input type="textarea" :rows="5" v-model="form.breakDescription" placeholder="请输入内容"/>
				</el-form-item>
				<!-- <el-form-item label="付租车押金" prop="rentDeposit" class="has_company">
					<el-input v-model="form.rentDeposit">
					<template slot="append">元</template>
				</el-input>
				</el-form-item>
				<el-form-item label="付违章押金" prop="breakRuleDeposit" class="has_company">
					<el-input v-model="form.breakRuleDeposit">
					<template slot="append">元</template>
				</el-input>
				</el-form-item> -->
			</div>

			<!-- h3 检查项目（还车） -->
			<div class="main_cell dis_f_sarwc">
				<div class="wa cell_label col_1 fwb" style="padding: 0 .4rem;"> 检查项目（还车） </div>
				
				<div class="dis_f_sarwc">
					<div v-for="(item,index) in form.checkItemList" style="width: 6.8rem;display: flex;margin-bottom: 22px;">
						<span class="loop_span">{{ item.componentName }}：</span>
						<el-select placeholder="请选择或输入" v-model="form.checkItemList[index].componentStatus" allow-create filterable default-first-option v-if="index == 0">
							<el-option
								v-for="dict in dict.type.component_oil"
								:key="dict.value"
								:label="dict.label"
								:value="dict.label"
							></el-option>
						</el-select>
						<el-select placeholder="请选择或输入" v-model="form.checkItemList[index].componentStatus" allow-create filterable default-first-option v-else>
							<el-option
								v-for="dict in dict.type.component_status"
								:key="dict.value"
								:label="dict.label"
								:value="dict.label"
							></el-option>
						</el-select>
					</div>
				</div>
				
			</div>

			<!-- h4 验车信息（还车） -->
			<div class="main_cell dis_f_sarwc">
				<div class="wa cell_label col_1 fwb" style="padding: 0 .4rem;"> 验车信息（还车） </div>
				<el-form-item label="验车完成时间" prop="checkTime" style="position: relative;">
					
					<el-date-picker
					  clearable
					  style="line-height: 35px;"
					  v-model="form.endDamage.checkTime"
					  type="datetime"
					  default-time="09:00:00"
					  format="yyyy-MM-dd HH:mm"
					  value-format="yyyy-MM-dd HH:mm"
					  placeholder="选择验车完成时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="公里数" prop="kilometer" class="has_company">
					<el-input v-model="form.endDamage.kilometer">
						<template slot="append">Km</template>
					</el-input>
				</el-form-item>
				<el-form-item label="车损状态" prop="damageStatus">
					<el-radio-group v-model="form.endDamage.damageStatus">
						<el-radio
							v-for="dict in dict.type.damage_status"
							:key="dict.value"
							:label="dict.value"
						>{{ dict.label }}
						</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="车损照片" prop="damageImg" v-if="form.endDamage.damageStatus == '1'">
					<image-upload v-model="form.endDamage.damageImg" :is-show-tip="false"/>
				</el-form-item>
				<el-form-item label="车损视频" prop="damageVideo" v-if="form.endDamage.damageStatus == '1'">
					<file-upload v-model="form.endDamage.damageVideo" :fileSize="500" :fileType="['mp4','mkv','avi','MOV','rmvb','wmv','hevc','pal','livp','heic','MPEG-4']" :is-show-tip="false"/>
				</el-form-item>
				<el-form-item label="车损描述" prop="damageDescription" v-if="form.endDamage.damageStatus == '1'">
					<el-input type="textarea" :rows="3" v-model="form.endDamage.damageDescription" placeholder="请输入车损描述"/>
				</el-form-item>
				<el-form-item label="是否维修" prop="isRepair">
					<el-radio-group v-model="form.endDamage.isRepair">
						<el-radio
							v-for="dict in dict.type.is_repair"
							:key="dict.value"
							:label="dict.value"
						>{{ dict.label }}
						</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="维修费用" prop="repairPrice" v-if="form.endDamage.isRepair == '1'" class="has_company">
					<el-input v-model="form.endDamage.repairPrice">
						<template slot="append">元</template>
					</el-input>
				</el-form-item>
				<el-form-item label="维修描述" prop="repairContent" v-if="form.endDamage.isRepair == '1'">
					<el-input type="textarea" :rows="3" v-model="form.endDamage.repairContent" placeholder="请输入维修描述"/>
				</el-form-item>
				<el-form-item label="维修录入时间" prop="repairTime" v-if="form.endDamage.isRepair == '1'">
					<el-date-picker
						clearable
						v-model="form.endDamage.repairTime"
						type="datetime"
						default-time="9:00:00"
						format="yyyy-MM-dd HH:mm"
						value-format="yyyy-MM-dd HH:mm"
						placeholder="选择维修录入时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="维修进场时间" prop="repairStartTime" v-if="form.endDamage.isRepair == '1'">
					<el-date-picker
						clearable
						v-model="form.endDamage.repairStartTime"
						type="datetime"
						default-time="9:00:00"
						format="yyyy-MM-dd HH:mm"
						value-format="yyyy-MM-dd HH:mm"
						placeholder="选择维修进场时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="维修出场时间" prop="repairEndTime" v-if="form.endDamage.isRepair == '1'">
					<el-date-picker
						clearable
						v-model="form.endDamage.repairEndTime"
						type="datetime"
						default-time="9:00:00"
						format="yyyy-MM-dd HH:mm"
						value-format="yyyy-MM-dd HH:mm"
						placeholder="选择维修出场时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="维修厂" prop="repairShop" v-if="form.endDamage.isRepair == '1'">
					<el-input v-model="form.endDamage.repairShop" placeholder="请输入维修厂"/>
				</el-form-item>
				<el-form-item label="维修完提车" prop="repaireGetCar" v-if="form.endDamage.isRepair == '1'">
					<el-radio-group v-model="form.endDamage.repaireGetCar">
						<el-radio
							v-for="dict in dict.type.is_repair"
							:key="dict.value"
							:label="dict.value"
						>{{ dict.label }}</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="是否出险" prop="isInsurance">
					<el-radio-group v-model="form.endDamage.isInsurance">
						<el-radio
							v-for="dict in dict.type.is_repair"
							:key="dict.value"
							:label="dict.value"
						>{{ dict.label }}</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="出险日期" prop="insuranceTime" v-if="form.endDamage.isInsurance == '1'">
					<el-date-picker
						clearable
						v-model="form.endDamage.insuranceTime"
						type="date"
						value-format="yyyy-MM-dd"
						placeholder="选择出险日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="理赔金额" prop="insurancePrice" v-if="form.endDamage.isInsurance == '1'" class="has_company">
					<el-input v-model="form.endDamage.insurancePrice">
						<template slot="append">元</template>
					</el-input>
				</el-form-item>
				<el-form-item label="出险描述" prop="insuranceDescription" v-if="form.endDamage.isInsurance == '1'">
					<el-input type="textarea" :rows="3" v-model="form.endDamage.insuranceDescription" placeholder="请输入出险描述"/>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input type="textarea" :rows="3" v-model="form.remark" placeholder="请输入备注"/>
				</el-form-item>
				<div class="wa cell_label col_1 fwb" style="padding: 0 .4rem;"> 财务明细 </div>
				<!-- h2 添加费用项目 -->
				<div class=" dis_f_sarwc">
					<div class="wa cost_list" v-for="(item,index) in form.costTableList" v-if="form.costTableList.length !== 0">
						<div class="item dis_f">
							<div class="label">费用类别：</div>
							<div class="text">{{item.costTypeName}}</div>
						</div>
						<div class="item dis_f">
							<div class="label">财务状态：</div>
							<div class="text">{{item.financeStatus | financeStatu}}</div>
						</div>
						<div class="item dis_f">
							<div class="label">收/付款方：</div>
							<div class="text">{{item.payerReceiver}}</div>
						</div>
						<div class="item dis_f">
							<div class="label">应收/付金额：</div>
							<div class="text">{{item.mustAmount}} 元</div>
						</div>
						<div class="item dis_f">
							<div class="label">应收/付时间：</div>
							<div class="text">{{item.mustTime}}</div>
						</div>
						<div class="item dis_f">
							<div class="label">实收/付金额：</div>
							<div class="text">{{item.actualAmount}} 元</div>
						</div>
						<div class="item dis_f">
							<div class="label">实收/付时间：</div>
							<div class="text">{{item.actualTime}}</div>
						</div>
						<div class="item dis_f">
							<div class="label">付款方式：</div>
							<div class="text">{{item.payChannel == 1 ? '现金' : '支付接口'}}</div>
						</div>
						<div class="item dis_f">
							<div class="label">是否已入公账：</div>
							<div class="text">{{item.payIntoAmount == 0 ? '未入' : '已入'}}</div>
						</div>
						<div class="item dis_f">
							<div class="label">入公账时间：</div>
							<div class="text">{{item.payIntoTime}}</div>
						</div>
						<div class="item dis_f">
								<div class="label">备注：</div>
								<div class="text">{{item.remark}}</div>
							</div>
						<div class="cost_list_del">
							<div class="" @click="handleDelete(item.newId)">删除</div>
						</div>
					</div>
					<el-button type="primary" @click="addExpense" style="margin-bottom: 22px"> 添加财务明细 </el-button>
				</div>
			</div>

		</el-form>
		</div>
		
		<el-dialog title="添加财务明细" :visible.sync="isAddExpense" width="86%" center >
			<addExpense @parHandle="addExpenseSuccess"></addExpense>
		</el-dialog>
	</div>
</template>
<script>
import addExpense from '@/components/AddNew/addExpense';
import { getCarOrder } from "@/api/carOrder";
import { listShop }from "@/api/shop";
import { getCar, listCar }from "@/api/car"; // s2 3
import { listCarComponent } from "@/api/carComponent";
import { listCarComponentStatus } from "@/api/carComponentStatus";
export default {
	dicts: ['is_break', 'component_status','damage_status','is_repair', 'component_oil' ],
	components: { addExpense },
	data(){
		return {
			orderId: this.$route.params.id || 0,
			carId: this.$route.params.carId || 0,
			a:{
				carNumber: null,
				brand: null,
			},
			form: {
				remark: '',
				isBreak: '0',
				damageStatus: '2',
				costTableList: [],
				endDamage: {
					damageType: "2",
					damageStatus: "2",
					isRepair: '0',
					isInsurance: '0',
					checkTime: '',
				},
				// endComponentStatus: [],
				checkItemList: [],
			},
			shopList: [],
			carList: [],
			// 表单校验
			rules: {
				endTime: [{required: true, message: "还车时间不能为空", trigger: "blur"}],
				rentDeposit: [{required: true, message: "付租车押金不能为空", trigger: "blur"}],
				breakRuleDeposit: [{required: true, message: "付违章押金不能为空", trigger: "blur"}],
				carNumber: [{required: true, message: "车牌号不能为空", trigger: "blur"}],
				brand: [{required: true, message: "品牌车型不能为空", trigger: "blur"}],
				carBrand: [{required: true, message: "车辆品牌不能为空", trigger: "blur"}],
				carModel: [{required: true, message: "车辆型号不能为空", trigger: "blur"}],
				costTypeId: [{required: true, message: "费用类别不能为空", trigger: "blur"}],
				mustAmount: [{required: true, message: "应收/付金额不能为空", trigger: "blur"}],
				mustTime: [{required: true, message: "应收/付时间不能为空", trigger: "blur"}],
				actualAmount: [{required: true, message: "实收/付金额不能为空", trigger: "blur"}],
				actualTime: [{required: true, message: "实收/付时间不能为空", trigger: "blur"}],
				discount: [{required: true, message: "优惠金额不能为空", trigger: "blur"}],
				debt: [{required: true, message: "欠款不能为空", trigger: "blur"}],
				// checkTime: [{required: true,message: "验车完成时间不能为空",trigger: "blur"}],
			},
			isAddExpense: false,  // 添加费用项目
		}
	},
	created(){
		this.loading = this.$loading({
			lock: true,
			text: "加载中",
			background: "rgba(0, 0, 0, 0.7)",
		});
		this.getCarOrder();
		this.getShopList();
		this.getCarList();
	},
	methods: {
		// 1 获取订单详情
		async getCarOrder(){
			await getCarOrder(this.orderId).then( res => {
				if(res.code == 200){
					this.carId = res.data.carId;
					this.form.carId = res.data.carId;
					this.form.id = res.data.id;
					this.a.carNumber = res.data.car.carNumber;
					this.a.brand = res.data.car.brand;
					// this.form = res.data;
					this.form.shopId = res.data.shopId;
					if(res.data.costTableList == null){ this.form.costTableList = []; };
					if(!res.data.remark){ this.form.remark = ''};
					if(!res.data.isBreak){ this.form.isBreak = "0"};
					if(!res.data.damageStatus){ this.form.damageStatus = "2"};
					if(res.data.endDamage == null){
						this.form.endDamage = {
							damageType: "2",
							damageStatus: "2",
							isRepair: '0',
							isInsurance: '0',
							checkTime: '',
						}
					}
					this.listCarComponent(); // 换车的还车检测项目
					// this.getEndComponentStatus(); // 还车检测项目
					this.getCar();
				}
			})
		},
		getCar(){
			getCar(this.carId).then(res => {
				this.$set(this.form.endDamage, 'kilometer', res.data.kilometer)
			});
		},
		/** 2 查询发车门店列表 */
		getShopList() {
			listShop().then(response => {
				this.shopList = response.rows;
			});
		},
		/** 3 查询车辆列表 */
		getCarList() {
			listCar().then(response => {
				this.carList = response.rows;
			});
		},
		// 查询车辆部件列表
		async listCarComponent() {
			const param = { componentType: "1" }
			await listCarComponent(param).then(response => {
				let list = [];
				response.rows.forEach((item, index) => {
					list.push({
						"componentId": item.id,
						"componentName": item.componentName,
						"componentStatus": ''
					})
					if (response.rows.length - 1 === index) {
						this.form.checkItemList = list;
					}
				})
			});
			this.loading.close();
		},
		// getEndComponentStatus() {
		// 	listCarComponentStatus({
		// 		orderId: this.form.id,
		// 		checkType: '2'
		// 	}).then(res => {
		// 		// this.endCarComponentList = res.rows;
		// 		this.form.endComponentStatus = res.rows;
		// 		this.loading.close();
		// 	});
		// },

		selectCar(id){
			this.carId = id;
			this.getCar();
		},
		// +1 添加费用项目 弹窗
		addExpense() {
			this.isAddExpense = true;
		},
		// 添加费用项目 成功后
		addExpenseSuccess(data){
			this.isAddExpense = false;
			this.form.costTableList.push(data);
		},
		// 删除费用项目
		handleDelete(newId) {
			this.$confirm('是否确认删除"' + newId + '"的数据项？').then(() => {
				this.form.costTableList.forEach((item, index) => {
					if (item.newId === newId) {
						this.form.costTableList.splice(index, 1);
						this.$message({
							type: 'success',
							message: '删除成功'
						});
						this.calculation();
					}
				})
			}).catch(() => {});
		},
		// 父级调用1 检查数据
		submitCheck(){
			this.$refs["form"].validate(valid => {
				if(!this.form.carId){
					this.$message({
						message: '请选择车辆',
						type: 'error'
					});
					window.scrollTo(0, 0);
					return false
				}
				// if(!this.form.endDamage.checkTime){
				// 	this.$message({
				// 		message: '请选择验车完成时间',
				// 		type: 'error'
				// 	});
				// 	return false
				// }
				if (valid) {
					this.$emit("submit");
				}
				this.loading.close();
			})
		},

		cancalReadOnly(onOff) {
			console.log(1)
			this.$nextTick(() => {
				if (!onOff) {
					const Selects = this.$refs
				　　　　　　// 如果只有1个下拉框，这段就足够了---start
					if (Selects.agentSelect) {
						const input = Selects.agentSelect.$el.querySelector('.el-input__inner');
						console.log(input)
						input.removeAttribute('readonly')
					}
				}
			})
		}
	},
	watch:{
		form: {
			handler(val,old){
				this.$emit("addReturnChange",val);
			},
			deep: true,  // 深度监听
		}
	},
	filters: {
		financeStatu(value){
			let text = '';
			if(value == 1){
				text = "已收";
			}else if(value == 2){
				text = "未收";
			}else if(value == 3){
				text = "已付";
			}else if(value == 4){
				text = "未付";
			}
			return text
		}
	}
}
</script>
<style scoped lang="scss">
	@import '@/assets/css/currency.css';
	#addReturn{
		/deep/ .el-dialog--center .el-dialog__body{
			padding: 25px 6px;
		}
		.cost_list{
			background: #eee;
			border-radius: .1rem;
			box-sizing: border-box;
			margin: 0 auto .2rem;
			width: 6rem;
			padding: .2rem;
			position: relative;

			.item{

				.label{
					width: 3rem;
					text-align: right;
					margin-right: 0.1rem;
				}
				.text{
					width: 3rem;
				}
			}
			.cost_list_del{
				position: absolute;
				right: .2rem;
				top: .2rem;
				color: red;
			}
		}
	}
</style>